.warnListPage {
  height: 100vh;
  background: #f8f9fa;
  display: flex;
  flex-direction: column;

  .nav {
    flex-shrink: 0;
    flex-grow: 0;
  }
}

.filterBox {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 30rpx;
  background: #fff;
  border-bottom: 1px solid #eaeaea;
  font-size: 28rpx;

  .icon-Alert {
    font-size: 60rpx;
    color: #e35d00;
  }

  .warnCount {
    position: relative;

    .badge {
      color: #e35d00;
      position: absolute;
      right: -12rpx;
      top: -12rpx;

    }
  }

  .filterButton {
    display: flex;
    gap: 10rpx;
    font-weight: 600;
  }
}

.warnList {
  color: #343a40;
}

.list {
  display: flex;
  flex-direction: column;
  padding-bottom: env(safe-area-inset-bottom);
}

.single {
  padding-left: 24rpx;
  font-size: 24rpx;
  position: relative;

  &::before {
    content: '';
    display: block;
    position: absolute;
    width: 1px;
    height: calc(100% - 26rpx);
    background: #d8d8d9;
    left: 38rpx;
    top: 54rpx;
  }
}

.location {
  display: flex;
  padding: 24rpx 0;
  gap: 10rpx;

  .iconfont {
    color: #c4c4c4;
  }

}

.card {
  background: #fff;
  margin-left: 70rpx;
  border-radius: 10rpx 0 0 10rpx;
  padding: 24rpx 28rpx;
  border-left: #d8d8d9 10rpx solid;

  &.status0 {
    border-color: #e35d00;
  }

  &.status1 {
    border-color: #058aff;
  }

  &.status2 {
    border-color: #f6d15b;
  }

  &.status3 {
    border-color: #5c9ead;
  }
}

.cardHeader {
  display: flex;
  justify-content: space-between;

  .title {
    color: #303030;
    font-size: 32rpx;
    font-weight: bold;
  }

  .status {
    color: #5C9EAD;
    background: #deecef;
    height: 40rpx;
    line-height: 40rpx;
    font-size: 20rpx;
    padding: 0 12rpx;
  }
}

.cardBody {
  font-size: 20rpx;
  font-weight: lighter;
  padding: 30rpx 0 10rpx 10rpx;

  .advice {
    display: flex;
    gap: 10rpx;
    padding: 8rpx 0;
  }

  .iconfont {
    color: #f6d15b;
    font-size: 28rpx;
  }
}

.cardFooter {
  display: flex;
  justify-content: space-between;
  font-size: 20rpx;
  color: #adb5bd;
  padding-left: 10rpx;

  .left {
    display: flex;
    gap: 40rpx;
    color: #058aff;

    .iconfont {
      font-size: 24rpx;
      padding-right: 10rpx;
    }
  }
}

.drawerFilter {
  color: #343a40;
}
.drawerFilter .result {
  display: flex;
  justify-content: space-between;
  font-size: 24rpx;
  padding: 30rpx;
}
.drawerFilter .infoIcon {
  display: flex;
  gap: 10rpx;
}
.drawerFilter .infoIcon .iconfont {
  color: #058AFF;
}
.filterTitle {
  font-size: 32rpx;
  display: flex;
  justify-content: space-between;
  padding: 20rpx 30rpx 24rpx 30rpx;
}
.filterCate {
  padding: 0 30rpx;
  display: flex;
  gap: 24rpx;
}
.filterCate .label {
  height: 52rpx;
  line-height: 52rpx;
  font-size: 20rpx;
  padding: 0 24rpx;
  background: #F6F8FA;
  border-radius: 12rpx;
  color: #303030;
}
.filterCate .label.active {
  background: #058aff;
  color: #fff;
}
.filterLine {
  border-bottom: #dedfe0 1px solid;
  padding: 20rpx 0;
}
.filterLine .filterTitle {
  font-size: 24rpx;
  color: #343a40;
}
.datePicker {
  padding: 0 30rpx;
}
.datePicker .range {
  display: flex;
  height: 64rpx;
  line-height: 64rpx;
  gap: 20rpx;
  font-size: 24rpx;
  color: #ADB5BD;
}
.datePicker .range .box {
  flex-grow: 1;
  border: #ADB5BD 1px solid;
  padding: 0 20rpx;
  border-radius: 8rpx;
  display: flex;
}
.datePicker .range .box .text {
  flex-grow: 1;
  text-align: center;
  padding-right: 40rpx;
}
.yScrollView {
  height: 580rpx;
}
.confirmArea {
  display: flex;
  justify-content: flex-end;
  gap: 20rpx;
  padding: 20rpx;
}

.subScrollView {
  width: 100%;
  height: 122rpx;
  white-space: nowrap;
}
.subScrollView .wrap {
  display: grid;
  grid-template-rows: repeat(2, 1fr);
  /* 两行 */
  grid-auto-flow: column;
  /* 水平方向延伸 */
  gap: 20rpx;
  /* 行和列间隙 */
  height: 100%;
}
.subScrollView .subItem {
  height: 48rpx;
  position: relative;
  font-size: 20rpx;
  padding: 0 36rpx;
  color: #343a40;
  background: #fff;
  border: #dedfe0 1px solid;
  line-height: 48rpx;
}
.subScrollView .subItem.active {
  background-color: #058AFF;
  color: #fff;
}